<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <jsp:include page="../../../../../head.jsp"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>角色列表</title>
    <style type="text/css">
        div#rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #555;
            text-align: left;
            padding: 2px;
        }

        div#rMenu ul {
            padding: 0;
            margin: 0;
        }

        div#rMenu ul li {
            margin: 1px 0;
            padding: 2px 5px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
            font-size: 12px;
        }
    </style>
</head>
<script type="text/javascript">
    var zTree, rMenu;
    var setting = {
        async: {
            enable: true,
            url: "role-data",
            dataFilter: filter
        },
        data: {
            simpleData: {
                pIdKey: "parent.id"
            }
        },
        callback: {
            onClick: function (event, treeId, treeNode, clickFlag) {
                $('#center', window.parent.document).attr("src",
                                                          "role-user?id=" + treeNode.id);
            },
            onRightClick: OnRightClick
        }
    };
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes)
            return null;
        return childNodes;
    }

    function OnRightClick(event, treeId, treeNode) {
        if (!treeNode && event.target.tagName.toLowerCase() != "button"
            && $(event.target).parents("a").length == 0) {
            zTree.cancelSelectedNode();
            showRMenu("root", event.clientX, event.clientY);
        } else if (treeNode && !treeNode.noR) {
            zTree.selectNode(treeNode);
            showRMenu("node", event.clientX, event.clientY);
        }
    }

    function showRMenu(type, x, y) {
        $("#rMenu ul").show();
        rMenu.css({
                      "top": y + "px",
                      "left": x + "px",
                      "visibility": "visible"
                  });
        $("body").bind("mousedown", onBodyMouseDown);
    }

    function hideRMenu() {
        if (rMenu)
            rMenu.css({
                          "visibility": "hidden"
                      });
        $("body").unbind("mousedown", onBodyMouseDown);
    }

    function onBodyMouseDown(event) {
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
            rMenu.css({
                          "visibility": "hidden"
                      });
        }
    }

    function refresh() {
        zTree.reAsyncChildNodes(null, "refresh");
    }

    function addRole() {
        hideRMenu();
        parent.jw.dialog({
                             iframe: "role-add",
                             width: 500,
                             height: 230
                         });
    }

    function updateRole() {
        hideRMenu();
        var obj = $.fn.zTree.getZTreeObj("roletree").getSelectedNodes()[0];
        if (obj && obj.id) {
            parent.jw.dialog({
                                 iframe: "role-update?id=" + obj.id,
                                 width: 500,
                                 height: 230
                             });
        } else {
            parent.jw.alert("请右键点击需要修改的角色!");
        }
    }

    function delRole() {
        var obj = $.fn.zTree.getZTreeObj("roletree").getSelectedNodes()[0];
        if (obj.id) {
            parent.jw.confirm("确定删除该角色，删除后会移除所有具有该角色的用户的对应角色权限!", function () {
                $.ajax({
                           "url": "role-del",
                           "data": {"id": obj.id},
                           "type": "post",
                           "success": function (data) {
                               parent.jw.alert(data.msg);
                               if (data.result) {
                                   refresh();
                               }
                           }
                       });
            });
        } else {
            jw.alert("请右键点击需要删除的节点!");
        }
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#roletree"), setting);
        zTree = $.fn.zTree.getZTreeObj("roletree");
        rMenu = $("#rMenu");
    });
</script>
<body class="ui-widget-content remove_border" style="height: 100%">
<div>
    <div>
        <input type="button" onclick="addRole();" value="新增角色"
               class="ui-button ui-widget ui-state-default ui-corner-all" style="font-size: 12px; ">
        <input type="button" onclick="updateRole();" value="修改角色"
               class="ui-button ui-widget ui-state-default ui-corner-all" style="font-size: 12px; ">
        <input type="button" onclick="delRole();" value="删除角色"
               class="ui-button ui-widget ui-state-default ui-corner-all" style="font-size: 12px; ">
    </div>
    <ul id="roletree" class="ztree"></ul>
</div>

<div id="rMenu">
    <ul>
        <li id="m_add" onclick="addRole();">增加角色</li>
        <li id="m_add" onclick="updateRole();">修改角色</li>
        <li id="m_del" onclick="delRole();">删除角色</li>
    </ul>
</div>
</body>
</html>
